<template>
    <div>
        <HeaderTop :title="pageTitle"/>
        <div class="search">
            <van-search
                v-model="keyWord"
                show-action
                placeholder="请输入搜索词"
                background="#f18010"
                shape='round'
                @search="onSearch"
            >
                <template #action>
                    <div style='color:#fff;'><span @click="onClickSearchButton">搜索</span></div>
                </template>
            </van-search>
        </div>
        <div class="search_content">
            <van-list
                :loading="loading"
                v-show="searchList.length"
            >
                <van-cell v-for="(item,index) in searchList" :key="index" @click="goStoreDetail(item)">
                    <!-- 数据加载中的图片路径不对 -->
                    <!-- <img class="left_img" :src="base_url+item.image_path" :alt="item.name"> -->
                    
                    <img class="left_img" src="@/assets/images/shop/default1.webp" :alt="item.name">
                    <div class="center_info">
                        <div class="title">
                            <span>{{item.name}}</span>
                        </div>
                        <div class="rate">
                            <span>{{item.rating}}分</span>
                            <img v-for="(imgurl, ins) in imgPath(item.rating)" :key="ins" :src="imgurl" alt="star">
                        </div>
                        <p class="play">
                            ￥{{item?.float_minimum_order_amount}}起送&nbsp;/&nbsp;{{item?.piecewise_agent_fee?.tips}}
                            &nbsp;&nbsp;
                            <!-- {{item?.opening_hours[0].split('/').join(' - ')}} -->
                        </p>
                    </div>
                    <div class="right_protected">
                        <div class="top">
                            <span v-for="it in item.supports" :key="it.id" :style="{color:'#'+it.icon_color}">{{it.icon_name}}</span>
                        </div>
                        <div class="midlle" :style="{color:'#'+item.color}">{{item?.delivery_mode?.text}}</div>
                        <div class="bottom">
                            月售:{{item.recent_order_num}}
                        </div>
                    </div>
                </van-cell>
            </van-list>
            <!-- 执行搜索操作之后获取数组长度为0 -->
            <div v-show="!searchList.length&&isSearch"><van-empty description="暂无数据显示"/></div>
        </div>
    </div>
</template>

<script>
import on from '@/assets/stars/star24_on@2x.png'
import half from '@/assets/stars/star24_half@2x.png'
import off from '@/assets/stars/star24_off@2x.png'

import { searchShopsApi } from '@/api/Search/index.js'
export default {
    name: 'Search',
    data() {
        return {
            pageTitle: '搜索',
            searchList: [],
            keyWord: '',
            // 经度
            latitude: '40.10038',
            // 纬度
            longitude: '116.36867',
            loading: false,
            // 商家图片的基地址
            base_url: 'http://cangdu.org:8001/img/',
            isSearch: false
        }
    },
    watch: {
        // keyWord() {
        //     this.isSearch = false
        // }
    },
    methods: {
        goStoreDetail(item) {
            console.log('item:',item.name)
            this.$router.push('/shop-info')
        },
        async onSearch() {
            // console.log('回车')
            await this.onClickSearchButton()
        },
        async onClickSearchButton() {
            if(this.keyWord.trim()) {
                this.isSearch = true
                this.loading = true
                const res = await searchShopsApi({
                    latitude: this.latitude,
                    longitude: this.longitude,
                    keyword: this.keyWord
                })
                if(res.status == 200) {
                    if(res.data.code === 0) {
                        this.searchList = []
                    } else {
                        this.searchList = res.data.data
                    }
                    this.loading = false
                    // console.log('搜索:', this.searchList)
                }
            } else {
                // 搜索关键词被重置为空时，无数据返回
                this.isSearch = false
                this.searchList = []
            }
        },
        // 商铺评分的五星标准
        imgPath(score) {
            let imgPathArr = []
            while(score>=1) {
                imgPathArr.push(on)
                score--
            }
            if (score>=0.5 && score<1) {
                imgPathArr.push(half)
            }
            while(imgPathArr.length<5) {
                imgPathArr.push(off)
            }
            return imgPathArr
        }
    }
}
</script>

<style lang="scss" scoped>

.van-search {
    border-top: 1px solid #efefef;
}
/deep/ .van-search__action {
    margin: 0 5px;
    background-color: transparent;
    border: 1px solid #efefef;
    border-radius: 5px;
    line-height: 28px;
}

.van-list {
    height: calc(100vh - 145px);
  .van-cell {
    height: 80px;
    padding: 10px;
    // background-color: green;
    /deep/ .van-cell__value {
      display: flex;
      flex-wrap: nowrap;
    }

    .left_img {
      height: 60px;
      width: 60px;
      border-radius: 10px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      margin-right: 10px;
      background-color: #dfdfdf;
    }

    .center_info {
      // 撑满剩余宽度，其他兄弟盒子要有具体的宽度
      flex: 1;
      width: 0;
      height: 100%;
      // background: pink;

      display: flex;
      flex-wrap: wrap;
      align-content: space-between;

      .title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 14px;
        font-size: 14px;
        font-weight: bold;
      }
      .rate {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: -8px;
        span {
          font-size: 14px;
          margin-right: 4px;
          font-weight: bold;
          color: #f18010;
          white-space: nowrap;
        }
        img {
          transform: scale(0.7);
        }
      }
      .play {
        width: 100%;
        font-size: 12px;
        line-height: 12px;
        color: #444;
      }
    }

    .right_protected {
      width: 60px;
      height: 100%;
      margin-left: 10px;
      text-align: center;
      .top {
        color: #707070;
        display: flex;
        align-items: center;
        justify-content: space-around;
        span {
          display: block;
          border: 1px solid #ccc;
          border-radius: 3px;
          font-size: 12px;
          line-height: 12px;
          transform: scale(0.8);
          // margin: 0 2px;
          padding: 2px;
        }
      }
      .midlle {
        font-size: 12px;
        line-height: 24px;
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        color: #f18010;
      }
      .bottom {
        font-size: 12px;
        line-height: 18px;
        color: #666;
      }
    }
  }
}

/deep/ .van-empty__image {
    width: 250px;
    height: 250px;
}
</style>